<!--  -->
<template>
  <v-data-table
  class="elevation-2"
  v-model="tableSelected"
  show-select
  item-key="id"
  :headers="tableHeaders"
  :items="tableItems"
  :loading="tableLoading"
  >
  <template v-slot:top>
          <v-container>
            <v-row dense>
              <v-col cols="12">
                <v-btn small class="ma-1" color="accent" @click="fetchData"><v-icon color="white">refresh</v-icon>刷新</v-btn>
                <v-btn small class="ma-1" color="warning" :disabled="tableSelected.length <= 0" @click="deleteItemHandle(tableSelected)"><v-icon color="white">close</v-icon>删除</v-btn>
              </v-col>
              <v-col cols="12" v-show="tableSelected.length > 0">
                <span>已选中<span class="primary--text font-weight-black">{{tableSelected.length}}</span>条记录</span>
              </v-col>
            </v-row>
          </v-container>
        </template>
  <template v-slot:item.filesize="{ item }">
    {{calcSize(item.filesize)}}
  </template>
  <template v-slot:item.action="{ item }">
    <v-btn text small color="black" :href="item.url" target="_blank"><v-icon>zoom_in</v-icon></v-btn>
    <v-btn text small color="red" @click.stop="deleteItemHandle([item])"><v-icon>delete</v-icon></v-btn>
  </template>
  </v-data-table>
</template>

<script>
import * as API from '@/api/admin/attachment.js'
export default {
  name: 'AttachmentLocal',
  components: {},
  data: function () {
    return {
      tableSelected: [],
      tableHeaders: [
        { text: 'ID', value: 'id' },
        { text: '名称', value: 'filename' },
        { text: '大小', value: 'filesize', align: 'center' },
        { text: '后缀', value: 'fileext' },
        // { text: '排序权重', value: 'position' },
        { text: '模块', value: 'module', align: 'center' },
        { text: '上传时间', value: 'updatedAt', align: 'center' },
        { text: '操作', value: 'action', sortable: false, width: '185px', align: 'center' }
      ],
      tableItems: [],
      tableLoading: false
    }
  },
  created: function () {
    this.fetchData()
  },
  computed: {},
  methods: {
    fetchData: function() {
      this.tableLoading = true
      API.fetchList({}).then(res => {
        this.tableItems = res.data.data
        // this.tableItemTotal = res.data.total
        // this.tablePageCount = res.data.last_page
      }).finally(() => {
        this.tableLoading = false
      })
    },
    deleteItemHandle: function(items) {
      if (confirm('是否确定删除？删除后无法恢复，请慎重！')) {
        API.deleteOne(items.map(e => e.id).join('_')).then(res => {
          // const index = this.tableItems.indexOf(item)
          // this.tableItems.splice(index, 1)
          this.fetchData()
          this.$toasted.success(res.data)
        }).catch(err => {
          return Promise.reject(err)
        })
      }
    }
  }
}
</script>
<style scoped>
</style>
